import React from 'react';
import { Box, Typography, Paper, List, ListItem, ListItemButton, Divider, Chip } from '@mui/material';
import { useAppContext } from '../contexts/AppContext';
import { formatMethodSignature } from '../utils/abiParser';
import {Method} from "../types/types";

const MethodList: React.FC = () => {
    const { state, dispatch } = useAppContext();

    const handleMethodSelect = (method: Method) => {
        dispatch({ type: 'SET_CURRENT_METHOD', payload: method });
    };

    if (state.methods.length === 0) {
        return (
            <Paper elevation={3} sx={{ p: 3, mb: 3 }}>
                <Typography variant="h6" gutterBottom>
                    Contract Methods
                </Typography>
                <Divider sx={{ mb: 2 }} />
                <Typography>No methods available. Please provide a valid ABI.</Typography>
            </Paper>
        );
    }

    return (
        <Paper elevation={3} sx={{ p: 3, mb: 3 }}>
            <Typography variant="h6" gutterBottom>
                Contract Methods ({state.methods.length})
            </Typography>
            <Divider sx={{ mb: 2 }} />

            <List sx={{ maxHeight: 400, overflow: 'auto' }}>
                {state.methods.map((method, index) => (
                    <React.Fragment key={index}>
                        <ListItem disablePadding>
                            <ListItemButton
                                onClick={() => handleMethodSelect(method)}
                                selected={state.currentMethod?.name === method.name}
                            >
                                <Box sx={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
                                    <Typography variant="body1" sx={{ fontWeight: 'medium' }}>
                                        {method.name}
                                    </Typography>
                                    <Typography variant="body2" color="text.secondary">
                                        {formatMethodSignature(method)}
                                    </Typography>
                                    <Box sx={{ mt: 1 }}>
                                        <Chip
                                            label={method.stateMutability}
                                            size="small"
                                            color={
                                                method.stateMutability === 'view' || method.stateMutability === 'pure'
                                                    ? 'success'
                                                    : 'warning'
                                            }
                                            sx={{ mr: 1 }}
                                        />
                                        {method.outputs.length > 0 && (
                                            <Chip
                                                label={`returns ${method.outputs.map(o => o.type).join(', ')}`}
                                                size="small"
                                                color="info"
                                            />
                                        )}
                                    </Box>
                                </Box>
                            </ListItemButton>
                        </ListItem>
                        {index < state.methods.length - 1 && <Divider />}
                    </React.Fragment>
                ))}
            </List>
        </Paper>
    );
};

export default MethodList;